<!DOCTYPE html>
<head>
	<title data-i18n-content="ext_options"></title>
	<link type="text/css" rel="stylesheet" href="css/bootstrap.2.0.4.min.css" />
	<link type="text/css" rel="stylesheet" href="css/style.css" />
	<script type="text/javascript" src="js/jquery.1.7.2.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.2.0.4.min.js"></script>
	<script type="text/javascript" src="js/assistant.js"></script>
</head>
<body>

<script type="text/javascript">
jQuery(document).ready(function () {
	assistant.getTranslation();

	jQuery('#save').click(saveOptions);
	jQuery('#restore').click(restoreOptions);

	getOptions();

	function saveOptions(internal) {
		_saveOptions();
		assistant.notify(chrome.i18n.getMessage("msg_option_saved"), 'success');
	}

	function restoreOptions() {
		_renderOptions(assistant.defaults);
		_saveOptions();
		assistant.notify(chrome.i18n.getMessage("msg_option_restored"), 'success');
	}

	function getOptions() {
		_renderOptions(assistant.getOptions());
	}

	function _saveOptions() {
		assistant.setOption('selector_entry', jQuery('#selector_entry').attr('value'));
		assistant.setOption('selector_link', jQuery('#selector_link').attr('value'));
		assistant.setOption('server_url', jQuery('#server_url').attr('value'));

		assistant.setOption('auto_extract', jQuery('#auto_extract')[0].checked);
		assistant.setOption('auto_memo', jQuery('#auto_memo')[0].checked);
		assistant.setOption('auto_close', jQuery('#auto_close')[0].checked);

		//console.log('#auto_extract: ' + jQuery('#auto_extract')[0].checked);
		//console.log('#auto_memo: ' + jQuery('#auto_memo')[0].checked);
	}

	function _renderOptions(options) {
		console.log(options);

		jQuery('#selector_entry').attr('value', options.selector_entry);
		jQuery('#selector_link').attr('value', options.selector_link);
		jQuery('#server_url').attr('value', options.server_url);

		if (options.auto_extract === 'true') {
			jQuery('#auto_extract').attr('checked', 'checked');
		}

		if (options.auto_memo === 'true') {
			jQuery('#auto_memo').attr('checked', 'checked');
		}

		if (options.auto_close === 'true') {
			jQuery('#auto_close').attr('checked', 'checked');
		}

		//console.log('auto_memo: ' + options.auto_extract);
		//console.log('auto_extract: ' + options.auto_memo);
	}

});
</script>

<div class="navbar navbar-fixed-top">
	<div class="navbar-inner">
		<div class="container-fluid">
			<a class="brand" target="_blank" href="http://code.google.com/p/etao-projects/downloads/list" data-i18n-content="ext_options"></a>
		</div>
	</div>
</div>

<div class="container-fluid" id="container">

	<div class="row-fluid">
		<div class="span12">

			<form method="post" action="" class="form-horizontal">

				<div class="control-group">
					<label class="control-label" data-i18n-content="opt_server_url"></label>
					<div class="controls">
						<input type="text" id="server_url" name="server_url" class="span4" />
					</div>
				</div>

				<div class="control-group">
					<label class="control-label" data-i18n-content="opt_selector_entry"></label>
					<div class="controls">
						<input type="text" id="selector_entry" name="selector_entry" class="span4" />
						<span class="help-inline" data-i18n-content="opt_selector_entry_tip"></span>
					</div>
				</div>

				<div class="control-group">
					<label class="control-label" data-i18n-content="opt_selector_link"></label>
					<div class="controls">
						<input type="text" id="selector_link" name="selector_link" class="span4" />
						<span class="help-inline" data-i18n-content="opt_selector_link_tip"></span>
					</div>
				</div>

				<div class="control-group">
					<label class="control-label" data-i18n-content="opt_behaviors"></label>
					<div class="controls">
						<label class="checkbox">
							<input type="checkbox" name="auto_extract" id="auto_extract" value="1" />
							<span data-i18n-content="opt_auto_extract"></span>
						</label>
						<label class="checkbox">
							<input type="checkbox" name="auto_memo" id="auto_memo" value="1" />
							<span data-i18n-content="opt_auto_memo"></span>
						</label>
						<label class="checkbox">
							<input type="checkbox" name="auto_close" id="auto_close" value="1" />
							<span data-i18n-content="opt_auto_close"></span>
						</label>
					</div>
				</div>

				<div class="form-actions">
					<a href="javascript:void(0)" id="save" class="btn btn-large btn-info">
						<i class="icon-ok icon-white"></i>&nbsp;
						<span data-i18n-content="action_save"></span>
					</a>
					<a href="javascript:void(0)" id="restore" class="btn btn-large btn-info">
						<i class="icon-refresh icon-white"></i>&nbsp;
						<span data-i18n-content="action_restore"></span>
					</a>
				</div>

			</form>

		</div>

	</div>

	<footer>
		<p>
			<span data-i18n-content="ext_name"></span>&nbsp;
			<span data-i18n-content="ext_version"></span>&nbsp;by&nbsp;
			<a href="mailto:wangshijun2010@gmail.com">wangshijun2010@gmail.com</a>
		</p>
	</footer>

</div>

</body>
</html>